<template>
	<scroll-view class="couponContainer" scroll-y="true" @scrolltolower="isDown">
		<view class="couponBox">
			<view v-for="(item,index) in list" :key="index" class="couponFor" v-if="list.length>0">
				<view class="couponItem">
					<view>订单号：{{item.pay_no}}</view>
					<view style="margin: 10px 0;">充值时间：{{item.created_at}}</view>
					<view>有效期至：{{item.expire_at}}</view>
				</view>
				<view style="font-weight: bold;">{{item.io_value_abs}}元</view>
			</view>
			<view v-else class="kong">
				<img class="img" style="width: 50px;height: 50px;" src="@/static/kong.png" alt="">
				<view>暂无充值记录~</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import { takeInLog } from '@/api/home.js'
	export default {
		data() {
			return {
				list:[],
				page:1,
				total:0,
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				takeInLog({page:this.page}).then(res=>{
					this.total = res.data.total
					res.data.items.map(item=>{
						this.list.push(item)
					})
				})	
			},
			isDown(){
				if(this.total > this.list.length ){
					this.page+=1
					this.getList()
				}
			},
		}
	}
</script>

<style scoped lang="less">
	::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.couponContainer{
		height: 100vh;
		padding: 10px 15px;
		box-sizing: border-box;
	}
	.goodsScroll{
		height: 100vh;
	}
	.couponBox{
		// background-color: #fff;
		// border-radius: 4px;
		// padding: 10px;
		// box-sizing: border-box;
		.couponFor{
			background-color: #fff;
			border-radius: 4px;
			margin-bottom: 10px;
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			padding: 15px;
			border-radius: 4px;
		}
	}
</style>
